﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>javascript动画研究</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style/Base.css" rel="stylesheet" />
    <style>
        body { background: #e1e1e1; }
        .body { position: relative; width: 1000px; height: 800px; padding: 20px; margin: 150px auto; border: 1px solid #e1e1e1; }
            .body a { color: #0d7c94; margin: 0 100px 0; }
                .body a:hover { background: #0d7c94; color: #fff; }
        .box { position: absolute; width: 100px; height: 100px; left: 100px; top: 80px; vertical-align: middle; text-align: center; border: 1px solid #808080; color: #fff; background-color: #f00; }
    </style>
</head>
<body>
    <div class="body">
        <a href="javascript:void(0);" title="开始" id="start">开始</a>
        <a href="javascript:void(0);" title="停止" id="stop">停止</a>
        <div id="box" class="box">动画走起......</div>
    </div>

    <script src="script/comment.js"></script>
    <script>
        function $(elem) {
            return typeof (elem) == "string" ? document.getElementById(elem) : elem;
        }
        var start = $("start");
        var stop = $("stop");
        var box = $("box");

        Handler.add(start, "click", movefns);

        function movefns() {
            function a(opt) {
                return new Animate(opt);
            }
            a({
                elem: box,
                styles: {
                    height: 500,
                    left: -100
                },
                delta: null,
                duration: 1000,
                callback: function () { }
            });
        }

        //宽度，高度，left,top,margin,padding
        function move(elem, obj, timer) {
            var cache_obj = {}, attrValue = {}, newobj = {}, pos = {}, t = 10;
            //清除定时
            if (move.moveElement) {
                clearTimeout(elem.moveElement);
            }

            //执行运算
            for (b in obj) {
                attrValue = getStyle(elem, obj);

                newobj[b] = parseInt(attrValue[b]);

                if (obj[b] - newobj[b] == 0) {
                    return;
                } else if (obj[b] - newobj[b] > 0) {
                    pos[b] = obj[b] - newobj[b];
                    cache_obj[b] = Math.ceil(pos[b] / 0);
                    elem.style[b] = newobj[b] + cache_obj[b] + 'px';
                } else if (obj[b] - newobj[b] < 0) {
                    pos[b] = obj[b] - newobj[b];
                    cache_obj[b] = Math.floor(pos[b] / timer);
                    elem.style[b] = newobj[b] + cache_obj[b] + 'px';
                }
            }

            //循环调用
            move.moveElement = window.setTimeout(function () { move(elem, obj, timer) }, 10);
        }

        function getStyle(dom, obj) {
            var cache = {};
            if (dom.currentStyle) {
                for (m in obj) {
                    cache[m] = dom.currentStyle[m];
                }
            } else if (window.getComputedStyle) {
                for (m in obj) {
                    cache[m] = window.getComputedStyle(dom, null)[m];
                }
            }
            return cache;
        }

    </script>
</body>
</html>
